<template>
  <div class="f-login-container">
    <div class="f-language-selector">
      <el-button style="width: 70px;margin-left: 10px;" size="small" round @click="backLogin">{{
        $t("login.signIn")
        }}</el-button>
      <el-button style="width: 70px" size="small" round @click="register">{{
        $t("login.register")
        }}</el-button>
    </div>
    <el-card class="verification-success-card">
      <div class="verification-success-content">
        <div style="display: flex;justify-content: center;">
          <img class="p-success-img" src="../../assets/img/success.png" alt="success">
        </div>
        <div class="p-passwordChange-text">
          {{ $t("login.verificationSuccess") }}
        </div>
        <div style="display: flex;justify-content: center;text-align:center;color: #909399;margin: 5% 5%;">
          {{ $t("login.verificationSuccessText") }}
        </div>
      </div>
      <div style="display: flex;justify-content: center;align-items: center;">
        <el-button @click="backLogin" class="verification-success-back-login">{{
          $t("login.backLogin") }}</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        password: '',
        confirmPassword: '',
      },
      rules: {
        username: [
          {
            required: true,
            message: this.$t('login.usernameRequired'),
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: this.$t('login.passwordRequired'),
            trigger: 'blur'
          }
        ]
      },
      selectedLanguage: 'en',
      languageOptions: [
        { value: 'en', label: 'English' },
        { value: 'zh', label: '中文' }
      ],
    }
  },
  methods: {
    backLogin(){
      this.$router.push("/login")
    },
    changeLanguage(e) {
      this.$nextTick(() => {
        localStorage.setItem('lang', e)
        this.$i18n.locale = e
      })
    },
    register(e) {
      this.$router.push("/register")
    },
    signIn() {
      this.$router.push("/login")
    }
  },
  mounted() {
    // 页面刷新后默认语言为英语
    localStorage.removeItem('lang')
    localStorage.setItem('lang', 'en')
  }
}
</script>

<style scoped>
::v-deep .select-popper .el-input__inner {
  border-radius: 15px;
}

::v-deep .el-input__placeholder {
  text-align: center;
}

@import "../../assets/css/PasswordChange.css";

@media (max-width: 600px) {
  .el-form {
    width: 100%;
  }
}
</style>
